<template>
  <!-- 搜索栏 -->
  <el-card class="search-card">
    <el-form :model="searchForm" label-width="80px" inline>
      <el-form-item label="工单编号">
        <el-input v-model="searchForm.productionOrderCode" placeholder="工单编号" clearable />
      </el-form-item>
      <el-form-item label="工单名称">
        <el-input v-model="searchForm.productionOrderName" placeholder="工单名称" clearable />
      </el-form-item>
      <el-form-item label="单据来源">
        <el-select style="width: 120px" clearable v-model="searchForm.productionOrderSource" placeholder="单据来源">
          <el-option label="客户订单" :value="1"/>
          <el-option label="库存备货" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="物料编号">
        <el-input v-model="searchForm.materialCode" placeholder="物料编号" clearable />
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="searchForm.materialName" placeholder="物料名称" clearable />
      </el-form-item>

      <el-form-item label="客户编号">
        <el-input v-model="searchForm.customerCode" placeholder="客户编号" clearable />
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input v-model="searchForm.customerName" placeholder="客户名称" clearable />
      </el-form-item>
      <el-form-item label="工单类型">
        <el-select style="width: 120px" clearable v-model="searchForm.productionOrderType" placeholder="单据来源">
          <el-option
            v-for="dictData in productionOrderTypeDictDataList"
            :value="dictData.id"
            :label="dictData.dictLabel"
            :key="dictData.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select style="width: 120px;" v-model="searchForm.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="dictData in productionOrderStatusDictDataList"
            :label="dictData.dictLabel"
            :value="dictData.id"
            :key="dictData.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button x type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 工具栏 -->
  <div class="toolbar">
    <el-button type="primary" @click="handleAdd">新增工单</el-button>
  </div>
  <!-- 列表 -->
  <el-card class="table-card">
    <el-table
        :data="productionOrderList"
        border
        stripe
        @selection-change="handleSelectionChange"
    >
      <el-table-column prop="productionOrderCode" label="工单编号">
        <template #default="scope">
          <el-link type="primary" @click="">{{scope.row.productionOrderCode}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="productionOrderName" label="工单名称"/>
      <el-table-column prop="typeDictData.dictLabel" label="工单类型"/>
      <el-table-column prop="productionOrderSource" label="工单来源">
        <template #default="scope">
          {{scope.row.productionOrderSource == 1?'客户订单':'库存备货'}}
        </template>
      </el-table-column>
      <el-table-column prop="orderCode" label="订单编号"/>
      <el-table-column prop="materialCode" label="产品/物料编号"/>
      <el-table-column prop="material.code" label="产品/物料名称"/>
      <el-table-column prop="material.specification" label="规格"/>
      <el-table-column prop="material.unit.name" label="单位"/>
      <el-table-column prop="productionOrderQuantity" label="工单数量"/>
      <el-table-column prop="productionOrderQuantity" label="已生产数量">
        {{0}}
      </el-table-column>
      <el-table-column prop="customer.code" label="客户编号"/>
      <el-table-column prop="customer.name" label="客户名称"/>
      <el-table-column prop="requestDate" label="需求日期"/>
      <el-table-column prop="statusDictData.dictLabel" label="状态">
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button size="small" v-if="scope.row.statusDictData.dictValue == 1" @click="">编辑</el-button>
          <el-button
              v-if="scope.row.statusDictData.dictValue == 1" size="small" type="danger" @click="">
            删除
          </el-button>
          <el-button size="small" v-if="scope.row.statusDictData.dictValue == 2">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 分页栏 -->
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 其他弹窗 -->

  <el-dialog
    :title="dialogTitle"
    v-model="addOrUpdateDialogVisable"
    width="80%">
    <el-form v-model="productionOrderForm">
      <el-form-item label="编号">
        <el-input v-model="productionOrderForm.productionOrderCode"/>
        <el-switch
            @click="autoCode"
          v-model="isAutoCode"
          size="large"
          inline-prompt
          active-text="生成"
          inactive-text="生成"/>
      </el-form-item>
      <el-form-item label="工单名称">
        <el-input v-model="productionOrderForm.productionOrderName"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelAddOrUpdate">取消</el-button>
        <el-button v-if="!isDetail" type="primary" @click="submitProductionOrderForm">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
// 导入必须的内容
import {ref,onMounted} from "vue";
import {ElMessage,ElMessageBox} from "element-plus";
import {getProductionOrderList,getAutoCode,queryByCode,addProductionOrder,deleteProductionOrder,updateProductionOrder,batchDeleteProductionOrder} from "@/api/production-order.js";
// 导入字典相关的API
import {getDictDataList} from "@/api/dictData.js";

// ----- 属性声明 ↓
// 绑定搜索表单的数据
const searchForm = ref({
  productionOrderCode:"",
  productionOrderName:"",
  materialCode:"",
  materialName:"",
  status:"",
  customerName:'',
  customerCode:'',
  productionOrderSource:"",
  productionOrderType:"",
})
// 工单列表数据
const productionOrderList = ref([])
// 分页相关数据
const pagination = ref({
  currentPage:1,
  pageSize:10,
  total:0
})
// 弹窗的标题
const dialogTitle = "新增工单";
// 弹窗标记
const addOrUpdateDialogVisable = ref(false);
// 编辑标记
const isEdit = ref(false);
// 新增/编辑表单的数据绑定对象
const productionOrderForm = ref({
  //....
})
// 是否自动生成编号标记
const isAutoCode = ref(false);
// 是否是显示详情的标记
const isDetail = ref(false);

// 工单类型字典列表
const productionOrderTypeDictDataList = ref([]);
// 工单状态点列表
const productionOrderStatusDictDataList = ref([]);
// ----- 属性声明 ↑
// -- 函数声明 ↓
const loadProductionOrderStatusDictDataList=()=>{
  getDictDataList({dictType:"PRODUCTION_ORDER_STATUS"}).then(res=>{
    productionOrderStatusDictDataList.value = res.data.records;
  })
}

// 加载工单类型字典的函数
const loadProductOrderDictDataList=()=>{
  getDictDataList({dictType:"PRODUCTION_ORDER_TYPE"}).then(res=>{
    productionOrderTypeDictDataList.value = res.data.records;
  })
}
// 提交新增/编辑表单的按钮事件
const submitProductionOrderForm = ()=>{

}
// 取消新增/编辑的事件
const cancelAddOrUpdate = ()=>{
  addOrUpdateDialogVisable.value = false;
}
// 自动生成编号的事件
const autoCode = ()=>{

}
// 新增工单的按钮事件
const handleAdd = ()=>{
  //....
  addOrUpdateDialogVisable.value = true;
}
// 改变了每页大小的事件
const handleSizeChange =(pageSize)=>{
  pagination.value.pageSize = pageSize;
  handleSearch();
}
// 改变页面的事件  翻页事件
const handleCurrentChange =(newPage)=>{
  pagination.value.currentPage = newPage;
  handleSearch();
}
// 搜索数据的事件
const handleSearch=()=> {
  // 调用查询的接口查询数据
  let params = {};// 这里需要组织参数--------------
  // 请求参数就是searchForm.vaue 和  page相关的参数
  params = searchForm.value;// 这里只包含了搜索条件，没有分页参数
  params.pageNum = pagination.value.currentPage;
  params.pageSize = pagination.value.pageSize;
  getProductionOrderList(params).then(res=>{
    productionOrderList.value = res.data.list;
    pagination.value.total = res.data.total;
  })

  // 模拟数据
  pagination.value.total = 55;
  productionOrderList.value = [
    {
      "id": 110,
      "productionOrderCode": "MO202503120008",
      "productionOrderName": "博世螺丝刀【一字型,蓝色刀柄】",
      "productionOrderSource": 1,
      "productionOrderType": 2,
      "orderCode": "202503181001",
      "materialCode": "IF2022082439",
      "productionOrderQuantity": 1500,
      "customerCode": "C00197",
      "requestDate": "2025-09-08",
      "status": 56,
      "qrCodeUrl": "",
      "createTime": "xxxxx",
      "updateTime": "xxxxx",
      "creatorId": 1,
      "updatorId": 1,
      "deleteFlag": 0,
      "typeDictData": {
        "id": 29,
        "dictType": "PRODUCTION_ORDER_TYPE",
        "dictLabel": "外购",
        "dictValue": "1",
        "cssClass": null,
        "listClass": null,
        "isDefault": 0,
        "sort": 3,
        "status": 1,
        "createdBy": null,
        "createdTime": "2025-09-20 09:52:41",
        "updatedBy": null,
        "updatedTime": null,
        "remark": "外购",
        "deleteFlag": 0
      },"statusDictData": {
        "id": 29,
        "dictType": "PRODUCTION_ORDER_TYPE",
        "dictLabel": "草稿",
        "dictValue": "1",
        "cssClass": null,
        "listClass": null,
        "isDefault": 0,
        "sort": 3,
        "status": 1,
        "createdBy": null,
        "createdTime": "2025-09-20 09:52:41",
        "updatedBy": null,
        "updatedTime": null,
        "remark": "外购",
        "deleteFlag": 0
      },
      "customer": {
        "id": 1,
        "code": "CUST001",
        "name": "华为技术有限公司",
        "address": "深圳市龙岗区华为总部1",
        "contactPerson": "张经理",
        "phone": "0755-12345678",
        "fax": "0755-87654321",
        "email": "zhang@huawei.com",
        "description": "重要客户",
        "status": 1,
        "createTime": "2025-09-16 16:38:25",
        "updateTime": "2025-09-17 09:51:56",
        "deleteFlag": 0
      },
      "material": {
        "id": 1,
        "code": "MAT001",
        "name": "芯片A",
        "specification": "ARM-Cortex-A53 1.2GHz",
        "unitId": 1,
        "categoryId": 4,
        "isHighValue": 1,
        "hasSafetyStock": 1,
        "minStock": 100,
        "maxStock": 1000,
        "safetyStock": 300,
        "imageUrl": "/images/mat001.jpg",
        "description": "高性能处理芯片",
        "status": 1,
        "createTime": "2025-09-16T16:38:26",
        "updateTime": "2025-09-16T16:38:26",
        "deleteFlag": 0,
        "unit": {
          "id": 1,
          "code": "UNIT001",
          "name": "件",
          "description": "基本单位-件",
          "isMainUnit": 1,
          "mainUnitId": null,
          "conversionRatio": 1,
          "status": 1,
          "createTime": "2025-09-16T16:38:25",
          "updateTime": "2025-09-16T16:38:25",
          "deleteFlag": 0
        }
      }

    }
  ]
}
// -- 函数声明 ↑
onMounted(()=>{
  loadProductionOrderStatusDictDataList();
  loadProductOrderDictDataList();
  handleSearch();
})


</script>

<style scoped>
.customer-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>